<template>
	<view class="page">
		<view class="header">
			<image class="bg" src="https://yun.shlxkj.info:44300/艾瑞测/小程序/static/img/user-center-bg.png" mode="widthFix"></image>
			<view class="user-info">
				<view class="avatar-wrap">
					<image class="avatar" src="https://yun.shlxkj.info:44300/艾瑞测/小程序/static/img/logo.png" mode="widthFix"></image>
				</view>
				<view class="phone">{{ form.Phone }}</view>
			</view>
			<view class="artificial" @click="changeRole">{{$store.state.pwdStatus ? "切换为普通用户" : "切换为管理员"}}</view>
		</view>
		<view class="content">
			<view class="item-wrap" @click="goHelp">
				<view class="icon-wrap">
					<image class="icon" src="https://yun.shlxkj.info:44300/艾瑞测/小程序/static/img/help.png" mode="widthFix"></image>
				</view>
				<view class="item">
					<text class="desc">使用帮助</text>
					<image class="arrow" src="https://yun.shlxkj.info:44300/艾瑞测/小程序/static/img/arrow.png" mode="widthFix"></image>
				</view>
			</view>
			<view class="item-wrap" @click="goAgreement">
				<view class="icon-wrap">
					<image class="icon" src="https://yun.shlxkj.info:44300/艾瑞测/小程序/static/img/agreement.png" mode="widthFix"></image>
				</view>
				<view class="item">
					<text class="desc">用户协议</text>
					<image class="arrow" src="https://yun.shlxkj.info:44300/艾瑞测/小程序/static/img/arrow.png" mode="widthFix"></image>
				</view>
			</view>
			<view class="item-wrap" @click="goPrivacy">
				<view class="icon-wrap">
					<image class="icon" src="https://yun.shlxkj.info:44300/艾瑞测/小程序/static/img/privacy.png" mode="widthFix"></image>
				</view>
				<view class="item">
					<text class="desc">隐私政策</text>
					<image class="arrow" src="https://yun.shlxkj.info:44300/艾瑞测/小程序/static/img/arrow.png" mode="widthFix"></image>
				</view>
			</view>

			<view class="item-wrap" v-if="interval!=null" @click="goDetect">
				<view class="icon-wrap">
					<image class="icon" src="https://yun.shlxkj.info:44300/艾瑞测/小程序/static/img/interval.png" mode="widthFix"></image>
				</view>
				<view class="item">
					<text class="desc">距上次检测 {{interval}} 天</text>
					<image class="arrow" src="https://yun.shlxkj.info:44300/艾瑞测/小程序/static/img/arrow.png" mode="widthFix"></image>
				</view>
			</view>
		</view>
		


	
	</view>
</template>

<script>
	import {
		login,
		findLastReagentResult
	} from '../../utils/api';
	import {Base64} from '../../utils/base64_2.js';
	export default {
		name: 'UserCenter',
		components: {},
		computed: {},
		data() {
			return {
				form: {
					avatar: '',
					Phone: ''
				},
				interval: null, // 距上次检测多少天
			}
		},
		onLoad(op) {
			console.log(this.$store.state);
			this.form.avatar = this.$store.state.vx_t_u_info.avatarUrl || 'https://yun.shlxkj.info:44300/艾瑞测/小程序/static/img/logo.png'
			this.form.Phone = this.$store.state.vx_u_info.Phone || '测试'
			console.log("切换到个人中心" + this.$store.state.pwdStatus);
			this.findLastReagentResult()
		},
		methods: {
			goHelp() {
				uni.navigateTo({
					url: '/pages/help/index'
				})
			},
			goAgreement() {
				uni.navigateTo({
					url: '/pages/agreement/index'
				})
			},
			goPrivacy() {
				uni.navigateTo({
					url: '/pages/privacy/index'
				})
			},
			// 距上次检测多少天
			findLastReagentResult(){
				let base64 = new Base64()
					//加密base64.encode	
				let phone = base64.encode(this.$store.state.vx_u_info.Phone.toString())
				// console.log(phone);
				
				findLastReagentResult(phone).then((res)=>{
					if(res.Data != null){
						let lastTime = res.Data.Updated
						lastTime = new Date(lastTime)
						let nowTime = new Date()
						console.log(nowTime - lastTime);
						this.interval = parseInt((nowTime - lastTime)/1000/3600/24)
						console.log(this.interval);
					}
				})
			},
			goDetect(){
				uni.navigateTo({
					url: '/pages/detect-result/index'
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.page {
		width: 100vw;
		height: 100vh;
		background: #F5F7FB;
	}

	.header {
		width: 100vw;
		height: 450rpx;
		position: relative;

		.bg {
			width: 100vw;
			height: 450rpx;
		}

		.user-info {
			width: 750rpx;
			height: 135rpx;
			display: flex;
			align-items: center;
			margin-top: 16rpx;
			position: absolute;
			bottom: 73rpx;
			left: 23rpx;

			.avatar-wrap {
				width: 135rpx;
				height: 135rpx;
				border-radius: 50%;
				background-color: #FFFFFF;
				display: flex;
				justify-content: center;
				align-items: center;
			}

			.avatar {
				width: 100rpx;
				height: 100rpx;
				border-radius: 50%;
			}
		}

		.phone {
			font-size: 46rpx;
			color: #FFFFFF;
			margin-left: 15rpx;
			font-weight: 600;
		}

		.artificial {
			font-size: 14px;
			padding: 10rpx 20rpx;
			border-radius: 10rpx;
			background-color: #fff;
			position: absolute;
			bottom: 40rpx;
			left: 450rpx;
		}
	}

	.content {
		position: relative;
		width: 704rpx;
		margin: -25rpx auto 0;
		background-color: #ffffff;
		padding: 0 32rpx 15rpx;
		box-sizing: border-box;
		border-radius: 20rpx;

		.item-wrap {
			line-height: 103rpx;
			display: flex;
			justify-content: space-between;
			align-content: center;

			.icon-wrap {
				width: 103rpx;
				height: 103rpx;
				display: flex;
				justify-content: center;
				align-items: center;
			}

			.icon {
				width: 38rpx;
			}

			.item {
				line-height: 103rpx;
				flex: 1;
				display: flex;
				justify-content: space-between;
				align-items: center;
				border-bottom: 1rpx solid rgba(0, 0, 0, 0.05);
				color: #3A3A3A;

				.arrow {
					width: 30rpx;
					margin-right: 10rpx;
				}
			}
		}

	}

	.entry {
		.title {
			width: 100%;
			text-align: center;
			color: black;
			font-size: 20px;
			padding-bottom: 20rpx;
		}

		.intxt1,
		.intxt2 {
			background-color: #f5f5f5;
			height: 80rpx;
			line-height: 80rpx;
			margin-bottom: 20rpx;
		}
	}
</style>